import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import {ListItem,ListInfo,LoadMore} from '../style'
import * as actionCreator from '../store/actionCreator'
import { Link } from 'react-router-dom'

class List extends PureComponent {
  render() {
    const { list, getMoreList } = this.props;
    return (
      <div>
        {
          list.map((item)=>{
            return (
              <Link  key={item.get('id')} to={'/detail/' + item.get('id')}>
                <ListItem>
                  <img src={item.get('imgurl')} alt=""/>
                  <ListInfo>
                    <h3>{item.get('title')}</h3>
                    <p>{item.get('desc')}</p>
                    <p>
                      <span>icon {item.get('author')}</span>
                      <span>icon {item.get('collect')}</span>
                      <span>icon {item.get('read')}</span>
                    </p>
                  </ListInfo>
                </ListItem>
              </Link>
            )
          })
        }
        <LoadMore onClick={getMoreList}>更多文字</LoadMore>
      </div>
      
      
    )
  }
}
const mapState = (state) => ({
  list: state.getIn(['home', 'articleList'])
})
const mapDispatch = (dispatch)=> ({
  getMoreList(){
    dispatch(actionCreator.getMoreList())
  }
})
export default connect(mapState, mapDispatch)(List)